<template>
    <el-tabs 
    v-model="activeTab">
        <el-tab-pane label="功能权限" name="1">
            <!-- <el-checkbox v-show="editSave" v-model="checkAll" @change="handleCheckAllChange">所有权限</el-checkbox> -->
            <el-tree
                ref="treeRef"
                :data="treeData"
                :show-checkbox="editSave"
                default-expand-all
                highlight-current
                node-key="id"
                @check-change="nodeClick">
                <template #default="{node ,data}">
                    <div class="tag-label" v-if="!editSave">
                        <span v-show="data.is_show">{{data.name}}</span>
                        <!-- <span class="title-tag" v-show="data.show_help">{{data.show_help_text}}</span>
                        <span v-show=""></span> -->
                    </div>
                    <div v-else>{{data.name}}</div>
                </template>
            </el-tree>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="2">
            <el-radio-group v-model="company" @change="changeCompany" :disabled="!editSave">
                <el-radio :label="1">子企业数据隔离权限
                    <!-- <span class="title-tag">(企业间数据隔离存储)</span> -->
                    </el-radio>
                <!-- <span class="radio-title">子企业数据隔离权限<span class="title-tag">(企业间数据隔离存储)</span></span> -->
                <el-radio-group class="radio-group radio-title" @change="changeSub" v-model="sub" :disabled="!editSave">
                    <el-radio :label="1">企业内全员数据</el-radio>
                    <el-radio :label="3">自己及子部门权限</el-radio>
                    <el-radio :label="2">仅自己</el-radio>
                </el-radio-group><br>
                <!--暂时注释-->
                <!-- <el-radio :label="2">集团子企业数据共享权限
                    <span class="title-tag">(集团子企业数据打通)<span class="tag-up"><img src="@/assets/image/role/up.png" class="tag-img"/>去升级</span></span> -->
                    <!-- </el-radio> -->
                <!-- <span class="radio-title">集团子企业数据共享权限<span class="title-tag">(集团子企业数据打通)<span class="tag-up"><img src="@/assets/image/role/up.png" class="tag-img"/>去升级</span></span></span> -->
                <!-- <el-radio-group class="radio-group radio-title" @change="changeSub" v-model="sub">
                    <el-radio :label="4">集团全员数据</el-radio>
                    <el-radio :label="5">自己及子部门权限</el-radio>
                    <el-radio :label="6">仅自己</el-radio>
                </el-radio-group>  -->
            </el-radio-group>
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import { ref, toRefs, watch, toRef, watchEffect, computed } from 'vue'

import type { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { IsNotEmpty } from '@/utils/utils';
const activeTab = ref('1')
const sub = ref(1)
const company = ref(1)
const group = ref(1)
const checkAll = ref(false)

const treeRef = ref<InstanceType<typeof ElTree>>()
const roleIds = ref([])
const arrId = ref([])
const emit = defineEmits({
    handleCompany: null,
    handleSub: null,
    handleSelectAll: null,
    handleSelect: null
})
const props = defineProps(['editSave','tenantList','echoList','permission'])
const treeData = computed(()=>{
    let params = [{
        id:'-1',
        name:'所有权限',
        children:props.tenantList
    }]
    if(props.editSave){
        return params;
    }else{
        return props.tenantList;
    }
   
    
})

const setCheckedKeys = (data:any[]) => {
    treeRef.value!.setCheckedKeys(data, false)
}
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

watch(()=>props.echoList, (val) => {
    resetChecked()
    setCheckedKeys(val)
})
watch(()=>props.permission.data_premission_type, (val) => {
    company.value = Number(val)
})
watch(()=>props.permission.data_permissions,(val) => {
    sub.value = Number(val)
})

//选中所有权限
const handleCheckAllChange = () => {
    if(checkAll.value){
        treeRef.value!.setCheckedNodes(treeRef.value!.data as Node[], false);
    }else{
        treeRef.value!.setCheckedKeys([], false)
    }
    emit('handleSelectAll', checkAll.value)
}
//切换子企业与集团
const changeCompany = () => {
    if(company.value == 2){
        sub.value = 4
    }else{
        sub.value = 1
    }
    emit('handleCompany', company.value)
}
//切换内部
const changeSub = () => {
    if(sub.value==1||sub.value==2||sub.value==3){
        company.value = 1
    }else{
        company.value = 2
    }
    emit('handleSub', sub.value)
}
//选择节点
const nodeClick = (data:any, node:any) => {
    if(props.editSave){
        let keys = treeRef.value!.getCheckedKeys(true);        
        emit('handleSelect',keys)
    }
}
</script>
<style lang="scss" scoped>
.radio-title {
    font-size: 14px;
    color: #33302D;
}
:deep(.el-radio-group) {
    display: block;
    align-items: normal;
}
.radio-group {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
.tag-label {
    font-size: 14px;
    color: #33302D;
}
.tag-up {
    color: #FF6B00;
    font-size: 12px;
    .tag-img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
}
.title-tag {
    color: #739F44;
    font-size: 12px;
}
</style>
<style>
.el-tree-node__content {
    height: 35px;
}
.el-tree-node__expand-icon {
    color: #FF6B00;
}
</style>


